<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" />
<title>Animation qunit</title>

<link href="qunit.css" rel="stylesheet" />
<script src="qunit.js" type="text/javascript"></script>
<script src="../animation.js" type="text/javascript"></script>
	
</head>
<body>

<h1 id="qunit-header">qUnit</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>

<div id="target"></div>

<script type="text/javascript">

test("add transition", function(){
	var animation = new Animation();
	
	animation.addTransition({});
	animation.addTransition({});
	equal(2, animation.transitions.length);
	
	var anotherAnimation = new Animation();
	anotherAnimation.addTransition({});
	equal(1, anotherAnimation.transitions.length);
});

test("remove transition", function(){
	var animation = new Animation();
	
	animation.addTransition("width");
	equal(1, animation.transitions.length);
	
	animation.removeTransition("width")
	equal(0, animation.transitions.length);
});

test("run and invoke callback function", function(){
	expect(1);
	
	var target = document.getElementById("target")
	var animation = new Animation(target);
	
	animation.addTransition("width", 500);
	animation.run(callback);
	
	function callback(){
		equal("500px", window.getComputedStyle(target, null).width);
	}
});

</script>

</body>
</html>
